﻿<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>展开菜单</title>
<script>

function leo(n){
	var navUi = document.getElementById("m"+n);
	if(navUi.style.display != "block"){
		for(var i=0;i<=5;i++){
			document.getElementById("m"+i).style.display = "none";
		}
		navUi.style.display = "block";
	}else{
		navUi.style.display = "none";
	}
}
</script>
<style>
body {
	margin:30px 150px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
}
* {margin: 0; padding: 0; list-style-type: none; }
img {border:0}
#nav {width:145px; background: #3e95ff; border: 1px solid #ffd102;}

#nav li {
	width: 145px; line-height: 24px; border-top: 1px solid #64ffea;
	border-bottom: 1px solid #00ffaa; position: relative;
}
.img {
	position: absolute;
	top:5px;left:10px;
}
.navLink {
	width: 115px; height: 24px; padding-left:30px;
	display: block; color: #ffffff; text-decoration: none;
}
.navLink:hover {
	background-color:rebeccapurple;
}
.menu {width:145px; display: none;}
.menu li {
	width:145px; height: 22px; border-bottom: 1px solid #2f90ff;
	background:rgb(192, 135, 250);position: relative;
}
.menuLink {padding-left:50px;color:#ffffff;text-decoration: none;}
.menuLink:hover {text-decoration: underline;}
.img2 {position: absolute; top:5px;left:30px;}
</style>
</head>
<body>
<ul id="nav">
	<li><a onclick="leo(0)" href="#" class="navLink">0</a></li>
    <ul id="m0" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
    <li><a onclick="leo(1)" href="#" class="navLink">1</a></li>
    <ul id="m1" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
    <li><a onclick="leo(2)" href="#" class="navLink">2</a></li>
    <ul id="m2" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
    <li><a onclick="leo(3)" href="#" class="navLink">3</a></li>
    <ul id="m3" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
    <li><a onclick="leo(4)" href="#" class="navLink">4</a></li>
    <ul id="m4" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
    <li><a onclick="leo(5)" href="#" class="navLink">5</a></li>
    <ul id="m5" class="menu">
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
        <li><a href="#" class="menuLink">!</a></li>
    </ul>
</ul>
    
    
	

</body>
</html>
